<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background: red;
            float: left;
        }
        .box2{
            width: 200px;
            height: 200px;
            background: green;
            float: left;
            padding-left: 50px
        }
    </style>
</head>
<body>
   <div class="box1">1</div>
   <div class="box2">2</div> 
</body>
</html>
<!-- 
    margin的使用：
        - margin外边距控制是两个同级元素之间的位置关系
        - margin不会撑大元素的宽高
        - margin方向值：top、right、bottom、left
            - margin一个值：上下左右
            - margin两个值：上下 左右
            - margin三个值：上 左右 下
            - margin四个值：上 右 下 左 (顺时针)
        - margin可以接负值

        总结margin和padding的固定用法
            - *{margin:0;padding:0} 清除浏览器的默认间距
            - 元素{margin:0 auto} 控制版心水平居中

        margin和padding能不能乱用？

        margin最常见的bug
            - 当给子级元素添加margin值的时候，这个margin值会错误的解析到父级元素上
                - padding-top
                - 给父级元素添加一个border即可
                - 给父级添加overflow:hidden 文本溢出属性
            - 有多个元素，从上到下进行排列，margin-top和margin-bottom 取之间的最大值
                - padding-top/bottom
                - margin值设置一个
            

 -->